<template>
  <div class="service-carousel">
    <div class="swiper service-swiper">
      <div class="swiper-wrapper">
        <template v-for="(item, index) in homeServiceList" :key="index">
          <div class="swiper-slide" :data-id="item.id">
            <div class="service-card card">
              <img
                :src="
                  $getImgUrlFromMediaById(item.featured_media_src_url)
                    ? $getImgUrlFromMediaById(item.featured_media_src_url)
                    : require('@/assets/image/blank-profile-picture-973460_640.png')
                "
                class=""
                alt="..."
                style=""
              />
              <!-- <a-image
                :src="
                  $getImgUrlFromMediaById(item.featured_media_src_url)
                    ? $getImgUrlFromMediaById(item.featured_media_src_url)
                    : require('@/assets/image/blank-profile-picture-973460_640.png')
                "
                width="100%"
                height="200px"
              /> -->
              <div class="service-card-body">
                <h4 class="service-card-title" style="">
                  {{ $wordpressDecodeHTML(item.title.rendered) }}
                </h4>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div>
        <!-- <a-button type="primary" @click="() => setVisible(true, '111')"
          >show image preview</a-button
        > -->
        <a-image
          :width="200"
          :style="{ display: 'none' }"
          :preview="{
            visible,
            onVisibleChange: setVisible,
          }"
          :src="previewImageUrl"
        />
      </div>
      <!--  -->
      <div class="swiper-button-prev">
        <div class="swiper-button-box">
          <i class="fa fa-angle-left" aria-hidden="true"></i>
        </div>
      </div>
      <div class="swiper-button-next">
        <div class="swiper-button-box">
          <i class="fa fa-angle-right" aria-hidden="true"></i>
        </div>
      </div>
    </div>

    <div class="swiper-controller-wrapper">
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
// Import Swiper Vue.js components
import Swiper, {
  Navigation,
  Pagination,
  Scrollbar,
  Controller,
  Autoplay,
} from "swiper";
import "swiper/css";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
  nextTick,
} from "vue";
export default {
  name: "",
  components: {},
  props: {
    homeServiceList: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      swiperOptions: {
        modules: [Navigation, Pagination, Autoplay],
        // loop: true, //循环播放
        // autoplay: { delay: 3000, disableOnInteraction: false },
        speed: 500,
        // slidesPerView: "auto", //解决最后一张切换到第一张中间的空白

        // loopedSlides: 1,
        // slidesPerGroup: 4,

        breakpoints: {
          // when window width is >= 640px
          768: {
            slidesPerView: 2,
            spaceBetween: 50,
            slidesPerGroup: 2,
          },
          992: {
            slidesPerView: 4,
            spaceBetween: 50,
            slidesPerGroup: 4,
          },
        },
        // centeredSlides: true, //设置slide居中
        navigation: {
          prevEl: ".service-carousel .swiper-button-prev",
          nextEl: ".service-carousel .swiper-button-next",
        },
        pagination: {
          el: ".service-carousel .swiper-pagination",
          clickable: true,
          bulletClass: "my-bullet",
          bulletActiveClass: "my-bullet-active",
          // type: "custom",
          //   renderCustom: function (swiper, current, total) {
          //     var customPaginationHtml = "";
          //     for (var i = 0; i < total; i++) {
          //       //判断哪个分页器此刻应该被激活
          //       if (i == current - 1) {
          //         customPaginationHtml +=
          //           '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
          //       } else {
          //         customPaginationHtml +=
          //           '<span class="swiper-pagination-customs"></span>';
          //       }
          //     }
          //     return (
          //       '<span class="swiperPag">' + customPaginationHtml + "</span>"
          //     );
          //   },
        },
        observer: true,
        observeParents: true,
        // preventLinksPropagation: false, // 阻止点击事件冒泡
        on: {
          click: function (swiper, event) {
            var id = swiper.slides[swiper.clickedIndex].dataset.id;
            methods.jumpDetail(id);
          },
        },
      },
      //
      homeServiceList: props.homeServiceList,
      visible: false,
      previewImageUrl: null,
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      const serviceSwiper = new Swiper(".service-swiper", data.swiperOptions);
    });
    //
    const methods = {
      jumpDetail(id) {
        proxy.$router.push(`/service/detail/${id}`);
      },
      setVisible(value, aa) {
        data.visible = value;
      },
    };
    //
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
.service-carousel {
  .type-service {
  }

  .service-swiper {
    .swiper-slide {
      // border: #05cbb8 1px solid;
    }

    .swiper-button-prev,
    .swiper-button-next {
      color: #fff;
      z-index: inherit;
    }

    .swiper-button-box {
      color: #23282d;
      // background: rgba(49, 49, 49, 0.2);
      background: #fff;
      width: 3rem;
      height: 3rem;
      line-height: 3rem;
      border-radius: 100%;
      text-align: center;
      font-size: 1.5rem;
    }

    .swiper-button-prev {
      position: absolute;
      top: 50%;
      left: 0;
    }

    .swiper-button-next {
      position: absolute;
      top: 50%;
      right: 0;
    }
  }

  .swiper-controller-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    ::v-deep .swiper-pagination {
      margin-top: 20px;

      .my-bullet {
        border-radius: 50%;
        margin: 4px;
        background: #dbdde6;
        width: 0.5rem;
        height: 0.5rem;
        display: inline-block;
        transition: width 0.3s;
        cursor: pointer;
      }

      .my-bullet-active {
        display: inline-block;
        background: #05cbb8;
        border-radius: 4px;
      }
    }
  }

  .service-card {
    background: #fff;
    border: 1px solid #e9ebef;
    overflow: hidden;

    &:hover {
      cursor: pointer;
    }

    img {
      width: 100%;
      height: 25vh;
    }

    .service-card-body {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0.5rem 0.5rem 0 0.5rem;
    }

    .service-card-title {
      font-size: 1.125rem;
      font-family: "Source Sans Pro", sans-serif;
      font-weight: 600;
      text-transform: uppercase;
      line-height: 1;
      color: #464d50;
      text-align: center;
    }
  }
}
</style>
